<template>
  <div id="header" class="new_header">
    <div class="hd_bar">
        <div class="bd_bar_bd cle">
            <ul class="welcome">
                <li id="ECS_MEMBERZONE" v-if="userInfo.name">
                <router-link :to="'/app/home/member/userinfo'">{{userInfo.name}}</router-link>
                &nbsp;[
                <a @click="loginOut">退出</a>
                ]</li>
                <li id="ECS_MEMBERZONE" v-else>
                <router-link :to="'/app/login'">请登录</router-link>
                <s>|</s>
                 <router-link :to="'/app/register'">免费注册</router-link>
                </li>

            </ul>
            <ul id="userinfo-bar">
                <li class="more-menu" @mouseover="isShowVip=true" @mouseout="isShowVip=false"> <a>会员中心</a><i class="iconfont arrow"> </i>
                    <div class="more-bd" :class="{show:isShowVip}">
                        <div class="list">
                        <router-link :to="'/app/home/member/order'">我的订单</router-link>
                        <router-link :to="'/app/home/member/collection'">我的收藏</router-link>
                        <router-link :to="'/app/home/member/receive'">修改收货地址</router-link>
                        </div>
                    </div>
                </li>
                </ul>
        </div>
    </div>
    <div class="hd_main cle">
        <div class="logo">
        <router-link to="/app/home/index" class="lizi_logo">
            <img src="../../static/images/head/logo.gif" alt="慕学生鲜商城">
        </router-link>

        </div>
        <div class="search_box">
                <input class="sea_input" type="text" name="keywords" id="keyword" v-model="searchWord">
                <button  class="sea_submit" @click="searchSubmit">搜索</button>
        </div>
        <div class="head_search_hot">
         <span>热搜榜：</span>
          <router-link v-for="item in hotSearch" :to="'/app/home/search/'+item.keywords" :key="item.keywords">
            {{item.keywords}}
          </router-link>
        </div>
        <div class="intro">
            <ul>
                <li class="no1"><a href="javascript:void(0);" target="_blank">
                    <h4>正品保障</h4>
                    <p>100%正品低价</p>
                </a></li>
                <li class="no2"><a href="javascript:void(0);" target="_blank">
                    <h4>30天退换货</h4>
                    <p>购物有保障</p>
                </a></li>
                <li class="no3"><a href="javascript:void(0);" target="_blank">
                    <h4>满99就包邮</h4>
                    <p>闪电发货</p>
                </a></li>
            </ul>
        </div>
    </div>
    <div class="hd_nav">
        <div class="hd_nav_bd cle">
            <div class="main_nav main_nav_hover" id="main_nav">
                <div class="main_nav_link" @mouseover="overAllmenu" @mouseout="outAllmenu">
                    <a class="meunAll">全部商品分类
                        <i class="iconfont">&#xe643;</i>
                    </a>
                    <div class="main_cata" id="J_mainCata" v-show="showAllmenu">
                        <ul>
                            <li class="first" v-for="(item,index) in allMenuLabel" @mouseover="overChildrenmenu(index)" @mouseout="outChildrenmenu(index)">
                              <h3 style="background:url(../images/1449088788518670880.png) 20px center no-repeat;">
                                <router-link :to="'/app/home/list/'+item.id">{{item.name}}</router-link> </h3>
                                <div class="J_subCata" id="J_subCata" v-show="showChildrenMenu ===index"  style=" left: 215px; top: 0px;">
                                    <div class="J_subView" >
                                      <div v-for="list in item.sub_cat">
                                        <dl>
                                          <dt>
                                            <router-link :to="'/app/home/list/'+list.id">{{list.name}}</router-link>
                                          </dt>

                                          <dd>
                                            <router-link  v-for="childrenList in list.sub_cat" :key="childrenList.id" :to="'/app/home/list/'+childrenList.id">{{childrenList.name}}</router-link>
                                          </dd>
                                        </dl>
                                        <div class="clear"></div>
                                      </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <ul class="sub_nav cle" id="sub_nav">
                <li>
                    <router-link to="/app/home/index">首页</router-link>
                </li>
                <template v-for="(item,index) in allMenuLabel">
                  <li>
                    <div v-if="item.is_tab">
                      <router-link :to="'/app/home/list/'+item.id" >{{item.name}}</router-link>
                    </div>
                  </li>
                </template>

            </ul>
            <div class="hd_cart" id="ECS_CARTINFO"  @mouseover="overShopCar" @mouseout="outShopCar">
             <router-link class="tit" :to="'/app/shoppingcart/cart'" target = _blank>

                    <b class="iconfont">&#xe600;</b>去购物车结算<span><i class="iconfont">&#xe645;</i></span>
                    <em class="num" id="hd_cartnum" style="visibility: visible;">{{goods_list.goods_list.length}}</em></router-link>
                        <div class="list" v-show="showShopCar">
                            <div class="data">
                               <dl v-for="(item,index) in goods_list.goods_list">
                                <dt><router-link :to="'/app/home/productDetail/'+item.goods.id" target = _blank><img :src="item.goods.goods_front_image"></router-link></dt>
                                <dd>
                                  <h4><router-link :to="'/app/home/productDetail/'+item.goods.id" target = _blank>{{item.goods.name}}</router-link></h4>
                                  <p><span class="red">{{item.goods.shop_price}}</span>&nbsp;<i>X</i>&nbsp;{{item.nums}}</p>
                                  <a title="删除" class="iconfont del" @click="deleteGoods(index,item.goods.id)">×</a></dd>
                              </dl>
                            </div>
                            <div class="count">共<span class="red" id="hd_cart_count">{{goods_list.length}}</span>件商品哦~
                                  <p>总价:<span class="red"><em id="hd_cart_total">{{goods_list.totalPrice}}</em></span>
                                  <router-link class="btn" :to="'/app/shoppingcart/cart'" target = _blank>去结算
                                  </router-link>
                                  </p>
                            </div>
                        </div>
            </div>
        </div>
    </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import cookie from '../../static/js/cookie';
import { getHotSearch, getCategory ,deleteShopCart } from  '../../api/api'
export default {
    data(){
        return {
            hotSearch:[],//热词
            searchWord:'',//搜索词
            showAllmenu:false,//菜单显示控制
            allMenuLabel:[],//菜单
            showChildrenMenu:-1,//菜单显示控制
            showShopCar:false,//购物车显示控制
            isShowVip:false,
        }
    },
    computed: {
        ...mapGetters({
          goods_list: 'goods_list',
          userInfo:'userInfo'
        })
    },
    methods:{
        loginOut(){
            // this.$http.get('/getMenu')
            //     .then((response)=> {

                    //跳转到登录
                    this.$router.push({ name: 'login' })
            //     })
            //     .catch(function (error) {
            //       console.log(error);
            // });
        },
        overAllmenu(){
            this.showAllmenu = true;
        },
        outAllmenu(){
             this.showAllmenu = false;
        },
        searchSubmit(){
            if(this.searchWord){
                //跳转到登录
                this.$router.push({ name: 'search', params: { keyword: this.searchWord }});
            }
        },
        deleteGoods(index,id) { //移除购物车
            deleteShopCart(id).then((response)=> {
                console.log(response.data);
                this.goods_list.splice(index,1);

                // 更新store数据
                this.$store.dispatch('setShopList');

            }).catch(function (error) {
                console.log(error);
            });
        },
        clickHotWord(word){
            this.searchWord = word;
            //跳转搜索结果页
        },
        overChildrenmenu(index){
            this.showChildrenMenu = index;
        },
        outChildrenmenu(){
            this.showChildrenMenu = -1;
        },
        overShopCar(){
            this.showShopCar = true;
        },
        outShopCar(){
            this.showShopCar = false;
        },
        getMenu(){//获取菜单
          getCategory({
            params:{}
          }).then((response)=> {
                    console.log(response)
                    this.allMenuLabel = response.data
                })
                .catch(function (error) {
                  console.log(error);
                });
        },
        getHotSearch(){//获取热搜
          getHotSearch()
                .then((response)=> {
                    this.hotSearch = response.data
                })
                .catch(function (error) {
                  console.log(error);
                });
        }
    },
    created(){
        this.getMenu()//获取菜单
        this.getHotSearch()//获取热词
        // 更新store数据
        this.$store.dispatch('setShopList');//获取购物车数据
    },

}
</script>
<style scoped  lang='scss'>
html {
    background:#fafafa;
    color:#333;
    _background-attachment:fixed
}
html.isPhone {
    min-width:1196px
}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,select,textarea,th,td {
    margin:0;
    padding:0
}
body,button,input,select,textarea {
    font:12px/1.5 "Microsoft YaHei",Tahoma,Helvetica,Arial,simsun
}
address,cite,dfn,em,var,i {
    font-style:normal
}
ul,ol {
    list-style:none
}
a {
    text-decoration:none;
    color:#333;
    -webkit-transition:color .2s;
    -moz-transition:color .2s;
    -o-transition:color .2s;
    -ms-transition:color .2s;
    transition:color .2s
}
a:hover {
    color:#09c762
}
a:focus,area:focus {
    outline:0
}
fieldset,img {
    border:0
}

#header {
    background:#fff;
    zoom:1
}
#header .hd_main {
    width:1196px;
    margin:15px auto 0;
    position:relative;
    z-index:2001
}

/*需要---------整理*/
.new_header .search_result {
    margin:27px 0 0 -9px;
    width:380px
}
.new_header .hd_cart {
    top:0
}
.new_header .hd_cart .tit {
    border-color:#1e9246
}
.new_header .hd_cart .tit span {
    background-color:#1e9246
}

.hd_cart .tit b {
    color:#aaa;
    margin:0 8px 0 12px;
    font-size:16px;
    cursor:pointer
}
.hd_cart .tit span {
    position:absolute;
    right:0;
    top:-1px;
    display:block;
    width:34px;
    height:28px;
    padding-top:7px;
    background-color:#09c762;
    text-align:center;
    font-size:12px;
    color:#fff;
    cursor:pointer
}
.hd_cart .tit span i {
    display:inline-block;
    width:20px;
    height:20px;
    -webkit-transition:all .3s;
    -moz-transition:all .3s;
    -ms-transition:all .3s;
    transition:all .3s;
    -webkit-backface-visibility:hidden
}
.hd_cart .tit em {
    position:absolute;
    left:17px;
    top:-6px;
    text-align:center;
    font-size:12px;
    color:#fff;
    border:2px solid #fff;
    box-shadow:1px 1px 1px rgba(0,0,0,0.3);
    background-color:#09c762;
    border-radius:10px;
    padding:0 5px;
    line-height:16px;
    visibility:hidden
}
.hd_cart_hover .tit span i {
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg)
}
#header.new_header .hd_main {
    margin-top:20px;
    height:90px;
    padding-bottom:5px
}
.new_header .hd_main .intro {
    margin:0;
    position:absolute;
    right:0;
    width:352px
}
.new_header .hd_main .intro li {
    width:125px
}
.new_header .hd_main .intro li.no2 {
    width:116px
}
.new_header .hd_main .intro li.no3 {
    width:110px
}
#header.new_header .search_box {
    right:394px;
    top:14px;
    width:460px;
    height:32px;
    border-color:#09c762
}
#header.new_header .search_box .sea_input {
    margin:7px 8px 0;
    width:360px
}
#header.new_header .search_box .sea_submit {
    background-color:#09c762;
    width:80px;
    height:32px
}

/*----------*/
.hd_bar {
    height:34px;
    border-bottom:1px solid #e5e5e5;
    background-color:#f5f5f5;
    position:relative;
    z-index:2002
}


/*hd_bar ul*/

.hd_bar ul {
    padding-top:4px;
    float:left
}
.hd_bar ul.welcome {
    margin-left:-10px
}
.hd_bar ul.welcome li .iconfont {
    color:#999;
    margin-right:4px
}

.hd_bar ul#userinfo-bar {
    float:right
}
.hd_bar ul#userinfo-bar li .vipico {
    width:12px;
    height:17px;
   /*background:url(../../static/images/head/wap.png) no-repeat;*/
    float:left;
    margin-right:4px;
    font-size:18px
}
.hd_bar li {
    float:left;
    position:relative;
    z-index:2000;
    height:17px;
    line-height:17px;
    padding:5px 10px
}
.hd_bar li s {
    color:#ccc;
    margin:0 8px;
    text-decoration:none
}
.hd_bar li a:hover {
    text-decoration:none
}
.hd_bar ul.welcome li .iconfont {
    color:#999;
    margin-right:4px
}
.bd_bar_bd {
    width:1196px;
    margin:0 auto
}
.hd_bar li a.vip-ico {
    background-position:0 3px;
    padding-left:18px
}
.hd_bar li a.svip-ico {
    background-position:0 -23px;
    padding-left:18px
}
.hd_bar li.more-menu {
    padding-right:20px
}
.hd_bar li.more-menu i.arrow {
    position:absolute;
    top:5px;
    right:5px;
    font-size:16px;
    line-height:16px;
    z-index:2002;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    -ms-transition:all .5s;
    transition:all .5s;
    color:#bbb;
    -webkit-backface-visibility:hidden
}
.hd_bar li.more-menu .more-bd {
    position:absolute;
    top:37px;
    right:5px;
    z-index:2000;
    opacity:0;
    visibility:hidden;
    box-shadow:1px 1px 3px rgba(100,100,100,0.3);
    -webkit-transition:all .4s;
    -moz-transition:all .4s;
    -ms-transition:all .4s;
    transition:all .4s;
}
.show{
    opacity:1 !important;
    visibility:visible !important;
}
/*.hd_bar .more-bd .list {*/
    /*width:94px;*/
    /*border:1px solid #ddd;*/
    /*background:#fff*/
/*}*/
/*.hd_bar .more-bd .hezuo_list {*/
    /*width:72px*/
/*}*/
/*.hd_bar .more-bd .list a {*/
    /*display:block;*/
    /*background-color:#fff;*/
    /*border-bottom:1px dashed #d7d7d7;*/
    /*padding:6px 10px;*/
    /*height:17px;*/
    /*overflow:hidden*/
/*}*/
/*.hd_bar .more-bd .list a:hover {*/
    /*background:#f8f8f8;*/
    /*color:#333;*/
    /*text-decoration:none*/
/*}*/
/*.hd_bar .more-bd .list a.last {*/
    /*border-bottom:0*/
/*}*/
.hd_bar li.hover a.menu-link {
    color:#09c762
}
.hd_bar li.hover i.arrow {
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg)
}
.hd_bar li.hover .more-bd {
    top:27px;
    opacity:1;
    visibility:visible
}

/*cle*/
.cle:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:'\20';
    clear:both;
    height:0
}
.cle{
    *zoom:1
}


/*hd-main*/
.logo {
    position:absolute;
    left:10px;
    top:5px;
    z-index:2
}

.search_box {
    position:absolute;
    right:0;
    top:0;
    width:300px;
    height:29px;
    border:2px solid #1e9246;
    border-right:0;
    background-color:#fff;
    overflow:hidden;
    box-shadow:2px 1px 1px rgba(200,200,200,0.5) inset
}
.sea_input {
    float:left;
    width:228px;
    margin:5px;
    height:20px;
    line-height:20px;
    color:#bbb;
    outline:0;
    border:0;
    background:0
}
.sea_submit {
    font-size:15px;
    color:#fff;
    float:right;
    height:29px;
    width:62px;
    padding-left:6px;
    border:0;
    background-color:#1e9246;
    cursor:pointer;
    letter-spacing:5px;
    overflow:hidden
}
.sea_submit:hover {
    color:#ffd736
}


/*热搜榜*/
.head_search_hot {
    position:absolute;
    top:58px;
    right:404px;
    width:450px;
    height:16px;
    overflow:hidden
}
.head_search_hot span {
    color:#999
}
.head_search_hot a {
    margin:0 8px 0 5px;
    color:#666
}
.head_search_hot a.red,.head_search_hot a:hover {
    color:#09c762
}
/*hd-main   .intro*/
.intro {
    height:58px;
    margin:0 190px 0 240px;
    padding-top:20px
}

.hd_main .intro ul {
    float:right;
    height:56px
}
.hd_main .intro li {
    float:left;
    width:150px;
    height:46px;
    background:url(../../static/images/head/webintro-ico.png) 0 -9999px no-repeat;
    overflow:hidden
}
.hd_main .intro li a {
    display:block;
    padding:0 0 0 42px;
    text-decoration:none
}
.hd_main .intro li h4 {
    font-weight:bold;
    font-size:12px
}
.hd_main .intro li p {
    color:#999
}
.hd_main .intro li.no1 {
    background-position:0 1px
}
.hd_main .intro li.no2 {
    background-position:0 -50px
}
.hd_main .intro li.no3 {
    background-position:0 -100px
}

.hd_nav {
    background-color:#09c762;
    height:35px
}

.hd_nav_bd {
    padding-left:214px;
    position:relative;
    z-index:1990;
    width:982px;
    margin:0 auto
}

.main_nav {
    position:absolute;
    top:0;
    left:0;
    z-index:1991
}
.hd_nav .main_nav .main_nav_link {
    width:214px;
    height:35px;
    color:#fff;
    background-color:#000;
    overflow:hidden
}
.hd_nav .main_nav .main_nav_link a.meunAll {
    display:block;
    padding:7px 10px 0 0;
    height:25px;
    font-size:14px;
    text-align:center;
    font-weight:bold;
    color:#fff;
    overflow:hidden
}
.hd_nav .main_nav .main_nav_link a:hover {
    color:#fff;
    text-decoration:none
}
.hd_nav .main_nav .main_nav_link i {
    position:absolute;
    top:10px;
    right:50px;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    -ms-transition:all .5s;
    transition:all .5s;
    font-size:12px;
    line-height:16px;
    -webkit-backface-visibility:hidden
}
.hd_nav .main_nav_hover .main_nav_link i {
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg);
}

.main_cata {
    width:214px;
    height:auto;
    opacity:1;
    position:absolute;
    left:0;
    top:35px;
    z-index:1999;
    padding-bottom:10px;
}
.main_cata ul {
    width:214px;
    padding:10px 0;
    overflow:hidden;
    background-color:#3b3b3b;
    border-bottom:1px solid #ccc;
    box-shadow:-2px 4px 4px rgba(200,200,200,0.3)
}
.main_cata li {
    width:100%;
    height:35px;
    line-height:35px;
    border:none;
    overflow:hidden;
    font-size:0;
}
.main_cata li a {
    font-size:12px
}
.main_cata li h3 {
    text-indent:58px;
}
.main_cata li h3 a {
    font-size:13px;
    font-family:Arial;
    color:#fff;
}
.main_cata li .bd {
    padding:0 0 6px 14px;
    margin-right:-10px;
    height:43px;
    overflow:hidden
}
.main_cata li .bd a {
    color:#999;
    display:inline-block;
    margin-right:14px;
    line-height:22px
}
.main_cata li.last {
    padding:0;
    box-shadow:0 4px 3px rgba(200,200,200,0.3)
}
.main_cata li.last a {
    display:inline-block;
    width:48%;
    height:54px;
    text-align:center;
    line-height:54px;
    overflow:hidden;
    font-weight:bold;
    font-size:14px
}
.main_cata li.last a.no2 {
    border-left:1px solid #ccc
}
.main_cata li.current {
    background-color:#eee;
    border-right-color:#eee;
    box-shadow:0 0 10px #eee
}
.main_cata li.current h3 a,.main_cata li.current a:hover {
    color:#09c762
}




.J_subCata {
    position:absolute;
    top:35px;
    left:100px;
    z-index:1998;
    -webkit-transition:all .2s ease;
    -moz-transition:all .2s ease;
    -ms-transition:all .2s ease;
    -o-transition:all .2s ease;
    transition:all .2s ease
}
.J_subCata .J_subView {
    border:1px solid #ccc;
    width:600px;
    min-height:228px;
    padding-top:5px;
    overflow:hidden;
    background-color:#eee;
    position:relative;
    box-shadow:3px 3px 4px rgba(0,0,0,0.3);
    padding:10px;
}
.J_subCata .J_subView dl {
    padding:0 12px 12px;
}
.J_subCata .J_subView dt {
    float:left;
    color: #000000;
    font-size: 15px;
    font-weight: bold;
    line-height: 30px;
    text-align:right;
    margin-bottom: 8px;
    margin-right: 5px;
    min-width: 80px;
    text-indent: 0;
    zoom:1;
}

.J_subCata .J_subView dd {
    float: left;
    line-height: 30px;
    margin-left: 10px;
    width: 460px;
}
.J_subCata .J_subView dd a {
    display:inline-block;
    color:#09c762;
    padding:0 8px;
    font-size: 13px;
}
.J_subCata .J_subView dd.kuan_cata a {
    margin-right:30px
}
.J_subCata .J_subView dd.brand_cata {
    font-size:0
}
.J_subCata .J_subView dd.brand_cata a {
    display:inline-block;
    width:84px;
    height:32px;
    border:1px solid #ccc;
    text-align:center;
    margin:0 13px 8px 0;
    overflow:hidden;
    background-color:#fff
}
.J_subCata .J_subView dd.brand_cata a img {
    width:64px;
    height:32px;
    vertical-align:top
}
.J_subCata .J_subView dd a:hover {
    color:#09c762;
    border-color:#09c762
}



.clear {
    clear:both;
    height:0;
    font-size:0;
    line-height:0;
    overflow:hidden
}

.hd_nav .sub_nav {
    float:left
}
.hd_nav .sub_nav li {
    float:left;
    height:35px;
    overflow:hidden;
    font-size:14px;
}
.hd_nav .sub_nav li a {
    display:inline-block;
    height:21px;
    overflow:hidden;
    padding:7px 28px;
    color:#fff;
}
.hd_nav .sub_nav li.current a,.hd_nav .sub_nav li a:hover {
    color:#fff;
    background-color:#1e9246;
    text-decoration:none
}

.hd_cart {
    top:0
}
.hd_cart {
    position:absolute;
    right:0;
    top:30px;
    z-index:200
}
.hd_cart a:hover {
    text-decoration:none
}
.new_header .hd_cart .tit {
    border-color:#1e9246
}
.new_header .hd_cart .tit span {
    background-color:#1e9246
}



.hd_cart .tit {
    display:block;
    width:168px;
    height:28px;
    padding-top:5px;
    position:relative;
    z-index:10;
    background:#f8f8f8;
    border:1px solid #ccc;
    border-right:0;
    font-size:14px;
    color:#666
}
.hd_cart .tit b {
    color:#aaa;
    margin:0 8px 0 12px;
    font-size:16px;
    cursor:pointer
}
.hd_cart .tit span {
    position:absolute;
    right:0;
    top:-1px;
    display:block;
    width:34px;
    height:28px;
    padding-top:7px;
    background-color:#09c762;
    text-align:center;
    font-size:12px;
    color:#fff;
    cursor:pointer
}
.hd_cart .tit span i {
    display:inline-block;
    width:20px;
    height:20px;
    -webkit-transition:all .3s;
    -moz-transition:all .3s;
    -ms-transition:all .3s;
    transition:all .3s;
    -webkit-backface-visibility:hidden
}
.hd_cart .tit em {
    position:absolute;
    left:17px;
    top:-6px;
    text-align:center;
    font-size:12px;
    color:#fff;
    border:2px solid #fff;
    box-shadow:1px 1px 1px rgba(0,0,0,0.3);
    background-color:#09c762;
    border-radius:10px;
    padding:0 5px;
    line-height:16px;
    visibility:hidden
}
.hd_cart_hover .tit span i {
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg)
}

.hd_bar li.more-menu .more-bd {
    position:absolute;
    top:37px;
    right:5px;
    z-index:2000;
    opacity:0;
    visibility:hidden;
    box-shadow:1px 1px 3px rgba(100,100,100,0.3);
    -webkit-transition:all .4s;
    -moz-transition:all .4s;
    -ms-transition:all .4s;
    transition:all .4s
}
.hd_bar .more-bd .list {
    width:94px;
    border:1px solid #ddd;
    background:#fff
}
.hd_bar .more-bd .hezuo_list {
    width:72px
}
.hd_bar .more-bd .list a {
    display:block;
    background-color:#fff;
    border-bottom:1px dashed #d7d7d7;
    padding:6px 10px;
    height:17px;
    overflow:hidden
}
.hd_bar .more-bd .list a:hover {
    background:#f8f8f8;
    color:#333;
    text-decoration:none
}

.hd_bar li.hover .more-bd {
    top:27px;
    opacity:1;
    visibility:visible
}

.hd_cart .list {
    width:220px;
    position:absolute;
    right:0;
    top:35px;
    border:1px solid #09c762;
    background-color:#fff;
    -webkit-transition:all .3s;
    -moz-transition:all .3s;
    -ms-transition:all .3s;
    transition:all .3s
}
.hd_cart_hover .list {
    visibility:visible;
    opacity:1;
    top:34px
}
.hd_cart .list .load {
    height:100px
}
.hd_cart .list .fail {
    padding:10px 20px 20px;
    text-align:center;
    color:#999
}
.hd_cart .list .fail i {
    font-size:30px;
    color:#ddd
}
.hd_cart .list .data {
    position:relative;
    zoom:1;
    width:220px;
    overflow:hidden
}
.hd_cart .list .data_over {
    max-height:318px;
    _height:318px;
    overflow-y:auto
}
.hd_cart .list dl {
    padding:5px 8px;
    width:204px;
    height:42px;
    overflow:hidden;
    background:#fff;
    border-bottom:1px dashed #ddd
}
.hd_cart .list dt {
    float:left;
    width:42px
}
.hd_cart .list dt img {
    width:40px;
    height:40px;
    vertical-align:top;
    border:1px solid #ccc
}
.hd_cart .list dd {
    float:right;
    width:152px;
    color:#666;
    padding-top:2px;
    position:relative
}
.hd_cart .list .data_over dl {
    width:189px
}
.hd_cart .list .data_over dd {
    width:137px
}
.hd_cart .list dd a {
    color:#666
}
.hd_cart .list dd h4 {
    height:20px;
    overflow:hidden
}
.hd_cart .list dd i {
    display:inline-block;
    font-size:10px;
    -webkit-transform:scale(0.7)
}
.hd_cart .list dd .del {
    position:absolute;
    top:20px;
    right:0;
    color:#bbb
}
.hd_cart .list .count {
    background-color:#f5f5f5;
    color:#666;
    padding:10px 8px 14px;
    position:relative
}
.hd_cart .list .count span {
    margin:0 3px
}
.hd_cart .list .count em {
    font-size:14px;
    margin-left:2px
}
.hd_cart .list .count p {
    margin-top:12px
}
.hd_cart .list .count a {
    position:absolute;
    top:35px;
    right:10px;
    border-radius:0;
    border:0;
    padding:5px 15px 7px;
    font-size:14px;
    background: #09c762;
    color:#fff;
    &:hover{
      background: #1e9246;
    }
}



.fail {
    padding:10px 20px 20px;
    text-align:center;
    color:#999
}
.fail i {
    font-size:30px;
    color:#ddd
}

.here{padding:5px 0;color:#bbb}
.here i.iconfont{font-size:14px}
.here h1{display:inline;font-size:12px;color:#333;font-weight:normal}
.sidebar{width:214px;float:left}
.maincon{width:970px;float:right}
.cate-step{border:1px solid #eee;height:53px;overflow:hidden;padding-left:52px;margin-bottom:12px}
.cate-step a{display:block;height:21px;overflow:hidden;padding-top:34px;float:left;text-align:center}
.cate-step a:hover{text-decoration:none}
.hufu-step{background-position:0 0;background-color:#fdfdfd}
.hufu-step a.no1{width:106px}
.hufu-step a.no1:hover,#current-hstep1 a.no1{background-position:-52px -54px;color:#09c762}
.hufu-step a.no2{width:122px}
.hufu-step a.no2:hover,#current-hstep2 a.no2{background-position:-158px -54px;color:#09c762}
.hufu-step a.no3{width:109px}
.hufu-step a.no3:hover,#current-hstep3 a.no3{background-position:-280px -54px;color:#09c762}
.hufu-step a.no4{width:112px}
.hufu-step a.no4:hover,#current-hstep4 a.no4{background-position:-389px -54px;color:#09c762}
.hufu-step a.no5{width:117px}
.hufu-step a.no5:hover,#current-hstep5 a.no5{background-position:-501px -54px;color:#09c762}
.hufu-step a.no6{width:120px}
.hufu-step a.no6:hover,#current-hstep6 a.no6{background-position:-618px -54px;color:#09c762}
.hufu-step a.no7{width:104px}
.hufu-step a.no7:hover,#current-hstep7 a.no7{background-position:-738px -54px;color:#09c762}
.hufu-step a.no8{width:124px;padding-top:55px}
.hufu-step a.no8:hover,#current-hstep8 a.no8{background-position:-842px -54px;color:#09c762}
.caiz-step{background-position:0 -108px;background-color:#fdfdfd}
.caiz-step a.no1{width:88px}
.caiz-step a.no1:hover,#current-cstep1 a.no1{background-position:-52px -162px;color:#09c762}
.caiz-step a.no2{width:92px}
.caiz-step a.no2:hover,#current-cstep2 a.no2{background-position:-140px -162px;color:#09c762}
.caiz-step a.no3{width:84px}
.caiz-step a.no3:hover,#current-cstep3 a.no3{background-position:-232px -162px;color:#09c762}
.caiz-step a.no4{width:92px}
.caiz-step a.no4:hover,#current-cstep4 a.no4{background-position:-316px -162px;color:#09c762}
.caiz-step a.no5{width:86px}
.caiz-step a.no5:hover,#current-cstep5 a.no5{background-position:-408px -162px;color:#09c762}
.caiz-step a.no6{width:85px}
.caiz-step a.no6:hover,#current-cstep6 a.no6{background-position:-494px -162px;color:#09c762}
.caiz-step a.no7{width:95px}
.caiz-step a.no7:hover,#current-cstep7 a.no7{background-position:-579px -162px;color:#09c762}
.caiz-step a.no8{width:82px}
.caiz-step a.no8:hover,#current-cstep8 a.no8{background-position:-674px -162px;color:#09c762}
.caiz-step a.no9{width:90px}
.caiz-step a.no9:hover,#current-cstep9 a.no9{background-position:-756px -162px;color:#09c762}
.caiz-step a.no10{width:120px;padding-top:55px}
.caiz-step a.no10:hover,#current-cstep10 a.no10{background-position:-846px -162px;color:#09c762}
.cate-menu{margin-bottom:12px;background-color:#fff}
.cate-menu h3{border:1px solid #ddd}
.cate-menu h3 a{display:block;height:26px;padding:14px 0 12px 12px;background-color:#fff;position:relative}
.cate-menu h3 a:hover{background-color:#fafafa;text-decoration:none}
.cate-menu h3 strong{font-size:18px;color:#333;letter-spacing:3px;font-weight:400}
.cate-menu h3 i{position:absolute;right:10px;top:23px;color:#999;font-size:12px}
.cate-menu dl{border:1px solid #eee;padding:10px 0}
.cate-menu dt{font-size:14px;padding:5px 0 5px 12px;color:#888}
.cate-menu dd a{display:block;padding:7px 0 7px 27px;background-color:#fff}
.cate-menu dd a:hover{background-color:#fafafa;text-decoration:none}
.cate-menu dd a i{color:#bbb;margin-left:5px}
.cate-menu dd.current a,.cate-menu dd.current a:hover{color:#09c762;background-color:#f1f1f1}
.fixed-want{border:1px solid #eee;border-bottom:0;width:212px;background-color:#fff;top:0}
.fixed-want .hd{border-bottom:1px solid #ddd;font-size:14px;padding:8px 12px}
.fixed-want .bd{border-top:1px solid #eee}
.fixed-want dl{border-bottom:1px solid #eee;padding:10px 0}
.fixed-want .cate dt{border-right:1px dotted #eee;float:left;width:50px;padding:0 8px}
.fixed-want .cate dt a{display:block;height:68px;overflow:hidden;text-align:center}
.fixed-want .cate dt img{width:48px;height:48px;border:1px solid #eee}
.fixed-want .cate dd{margin-left:70px;height:68px;overflow:hidden}
.fixed-want dd a{display:inline-block;padding:1px 4px}
.fixed-want dd a.red{color:#09c762;background-color:#ffecf2;border-radius:3px}
.fixed-want .brand{padding:10px}
.fixed-want .brand dt{padding:0 10px 4px;border-bottom:1px dotted #eee}
.fixed-want .brand dd{padding-top:5px}
.fixed-want .brand p.more{text-align:right;margin-bottom:-5px}
.fixed-want .brand p.more a{color:#999}
a.more-btn,.rmb,.search-selected a.item,.sort .bd a span{
    /*background:url(images/search-page-bg.png) 0 -9999px no-repeat*/
}
.search-selected{background-color:#fff;border:1px solid #eee;border-bottom:1px solid #ccc;padding:9px 10px}
.search-selected span{display:inline-block;padding:4px 0 4px 0}
.search-selected a{display:inline-block;padding:4px 24px 4px 8px;color:#999}
.search-selected a.item{border:1px solid #ddd;background-color:#fff;margin-right:8px;background-position:right -245px;box-shadow:0 1px 1px #eee;color:#09c762}

.search-selected a.item:hover{background-color:#f2f2f2;background-position:right -217px;text-decoration:none}
.search-options{margin-bottom:12px;background-color:#fff;}
.search-options .bd{border:1px solid #eee;border-bottom:0;zoom:1;}
.search-options dl{padding:10px 0;border-bottom:1px solid #eee;width:100%;position:relative}
.search-options dt{position:absolute;top:10px;left:10px;font-size:14px}
.search-options dd{position:relative;padding:0 50px 0 63px;height:24px;overflow:hidden;-webkit-transition:height .3s;-moz-transition:height .3s;-o-transition:height .3s;transition:height .3s}
.search-options dd .items{padding-top:2px}
.search-options dd .w500{width:500px}
.search-options dd .items a{color:#666}
.search-options dd .items a:hover{color:#09c762}
.search-options dd .link{float:left;width:162px;height:18px;margin:0 10px 8px 0;overflow:hidden}
.search-options dd.dd-price .link{width:102px}
.search-options dd a.more-btn{position:absolute;top:3px;right:5px;margin-right:0;padding:0 20px 0 0;background-position:30px -381px;display:none;color:#09c762}
.search-options dd a.more-btn.clicked{background-position:30px -359px}
.search-options dd a.more-btn:hover{background-color:#fff;text-decoration:underline}
.search-options dd.dd-price{overflow:visible;z-index:10}
.priceform{position:absolute;top:-11px;left:500px;z-index:10}
.priceform .form-bg{width:270px;border:1px solid #fff;border-top-color:#eee;padding:8px 15px;padding-bottom:7px;font-size:0}
.priceform input{font-size:12px;border:1px solid #eaeaea;padding:3px;height:18px;width:60px;line-height:18px}
.priceform input.submit{height:26px;padding:0;line-height:16px;cursor:pointer;background-color:#eaeaea;width:68px;border-color:#e1e1e1;background-color:#eaeaea;background-image:-moz-linear-gradient(#fefefe,#eaeaea);background-image:-webkit-linear-gradient(#fefefe,#eaeaea);background-image:linear-gradient(#fefefe,#eaeaea)}
.priceform input.submit:hover{background-color:#e4e4e4}
.priceform span{height:26px;width:12px;display:inline-block;vertical-align:-9px;vertical-align:-1px;font-size:12px}
.priceform span.rmb{background-position:-10px -272px}
.priceform span.rmb2{padding-left:20px;background-position:8px -272px}
.priceform form p{display:none;text-align:right;padding-top:4px}
#priceform.focus .form-bg{background-color:#f6f6f6;border-color:#e4e4e4;height:28px;box-shadow:0 1px 3px rgba(100,100,100,0.1)}
#priceform.focus form p{display:inline;padding-left:15px}
.sort{margin-bottom:10px;height:30px;border:1px solid #eee;border-bottom:2px solid #ccc;padding:5px 0;background:#fff}
.sort .bd{float:left;font-size:0;padding-right:12px}
.sort .bd a{display:inline-block;font-size:12px;margin-right:-1px;margin-right:-2px;position:relative;z-index:1}
.sort .bd a span{display:block;padding:5px 26px 5px 15px;background-position:right -128px;background-position:right -127px}
.sort .curr .search_DESC{border:1px solid #fff;padding:4px 26px 4px 15px;background-position:right -104px;background-position:right -102px;color:#09c762;text-shadow:1px 1px 1px #fff}
.sort .curr .search_ASC{border:1px solid #fff;padding:4px 26px 4px 15px;background-position:right -330px;background-position:right -328px;color:#09c762;text-shadow:1px 1px 1px #fff}
.sort .bd a:hover{z-index:2;text-decoration:none}
.sort .bd a.default span{background-image:none;padding-right:15px}
.sort .bd a.promotion span{padding-right:15px;padding-left:30px;background-position:10px -153px}
.sort .bd a.clicked span{background-position:10px -184px}
.search_num{width:400px;float:right;text-align:right;line-height:30px;padding:0 15px}
.search_num b{color:#09c762}
.search_num span.search_btn{margin-left:10px;font-size:13px}
.search_num span.search_btn a{display:inline-block;width:26px;height:26px;line-height:28px;text-align:center;border:1px solid #e4e4e4;background-color:#fff;margin:0 5px;color:#999}
.search_num span.search_btn a:hover{border-color:#ccc;box-shadow:0 1px 1px #eee;text-decoration:none;color:#09c762}
.search_num span.search_btn span{color:#333}
.search_num span.search_btn span em{color:#09c762}
.productlist{width:970px;overflow:hidden}
.productlist ul{margin-right:-20px}
.productlist li{width:232px;height:342px;position:relative;float:left;margin:0 14px 14px 0;overflow:hidden;display:inline}
.productlist li a.productitem span.productimg img{width:230px;height:230px}
.cms-box{float:left;width:702px;padding-bottom:15px;display:none}
.cms-box h3{font-size:16px;margin-bottom:5px;padding-left:12px}
.cms-box h3 a{float:right;color:#999;font-size:12px;margin-top:5px}
.cms-box .bd{border:1px solid #eee;border-top-color:#000;padding:10px;background-color:#fff}
.cms-box .bd a:hover{text-decoration:none}
.cms-box .bd span.name{color:#666}
.cms-box .bd span.intro{color:#999}
.cms-box .bd span.price em{font-size:18px}
.cms-box .bd a:hover span.name{color:#09c762}
.baokuan-goods a,.baokuan-goods a span{display:block}
.baokuan-goods a span.price{color:#09c762}
.baokuan-goods a.no1{float:left;width:170px;padding:10px 5px 10px 15px;border-right:1px solid #eee;position:relative}
.baokuan-goods a.no1 img{width:150px;height:150px}

.baokuan-goods a.no2{float:right;width:450px;height:100px;overflow:hidden;padding:10px 15px}
.baokuan-goods a.no2 img{width:100px;height:100px;float:left}
.baokuan-goods a.no2 span{margin-left:110px}
.baokuan-goods a.no2 span.price{padding-top:30px}
.baokuan-goods a.border-btm{border-bottom:1px solid #eee}
.baokuan-goods a.no1 .guan-ico{position:absolute;left:10px;top:0;display:block;width:24px;height:20px}
.baokuan-goods a.no1:hover .guan-ico{background-position:0 0}
.new-goods{width:254px;float:right}
.new-goods .bd{position:relative;background-color:#fff}
.new-goods .list{position:relative;height:241px;width:170px;margin:0 auto;overflow:hidden}
.new-goods li{float:left;width:150px;padding:0 10px;height:241px;overflow:hidden}
.new-goods li a,.new-goods li span{display:block}
.new-goods li span.pic{margin-bottom:5px}
.new-goods li span.pic img{width:150px;height:150px}
.new-goods li span.name{font-size:14px;height:20px;overflow:hidden;margin-bottom:5px}
.new-goods .trg a{font-size:16px;color:#ddd;position:absolute;top:80px}
.new-goods .trg a:hover{text-decoration:none;color:#999}
.new-goods .trg a.prev{left:20px}
.new-goods .trg a.next{right:20px}
.week-hot{border:1px solid #eee;margin-bottom:12px;background-color:#fff;display:none}
.week-hot .hd{border-bottom:1px solid #eee;padding:0 12px;height:45px;overflow:hidden}
.week-hot .hd h3{font-size:16px;height:45px;line-height:45px}
.week-hot .bd{padding-bottom:10px}
.week-hot .item{float:left;width:180px;padding:0 30px;border-left:1px solid #f4f4f4;overflow:hidden;margin:10px 0}
.week-hot .nobrder{border-left:none}
.week-hot .item a{display:block;width:100%;position:relative}
.week-hot .item a:hover{text-decoration:none}
.week-hot .item img{display:block;width:180px;height:180px}
.week-hot span{display:block;margin-bottom:5px}
.week-hot .intro{font-size:14px}
.week-hot .name{color:#999;line-height:16px;height:16px;overflow:hidden}
.week-hot .price{color:#09c762}
.week-hot .price em{font-size:18px;font-family:arial;}
.week-hot .item .hot-ico{
   /* background:url(../../static/images/head/hot-ico-bg.png) -48px 0 no-repeat;*/
    display:block;width:40px;height:40px;overflow:hidden;position:absolute;top:0;left:0}
.week-hot .item .ico-mid{top:100px}
.week-hot .item a:hover .hot-ico{background-position:0 0}
.seemore_items{border:1px solid #ddd;float:right;width:212px;padding:10px 0;position:relative}
.seemore_items h3{position:relative;font-size:14px;color:#999;width:182px;margin:0 auto}
.seemore_items h3 a{position:absolute;right:0;top:-3px;font-size:24px;line-height:24px;color:#999}
.seemore_items h3 a:hover{text-decoration:none;color:#09c762}
.seemore_items .bd{width:162px;height:auto;position:relative;overflow:hidden;margin:0 auto}
.seemore_items .bd ul{width:162px}
.seemore_items li{height:220px;overflow:hidden;margin-bottom:10px}
.seemore_items li a{display:block;position:relative}
.seemore_items li a img{width:160px;height:160px;background-color:#fff;vertical-align:top}
.seemore_items li p.name{margin-top:5px;height:36px;overflow:hidden}
.clear_h_btn{display:block;width:100%;text-align:right;cursor:pointer;}

</style>
